<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>懒人原生纯CSS实现六边形效果</title>
    <style>
        .lanren{width: 66px;height: 120px;margin:100px auto;background-color: #008000;position: relative;}
        .lanren::before{content:"";width: 0;height: 0;position:absolute;left:-35px;top:0;border-right:35px solid #008000;border-top:60px solid transparent;border-bottom:60px solid transparent;}
        .lanren::after{content:"";width: 0;height: 0;position:absolute;right:-35px;top:0;border-left:35px solid #008000;border-top:60px solid transparent;border-bottom:60px solid transparent;}

        /* 代码原创：懒人之家 www.lanrenzhijia.com */

        .lanren2{width: 66px;height: 120px;margin:100px auto;background-color: red;position: relative;}
        .lanren2 .left{width: 0;height: 0;position:absolute;left:-35px;top:0;border-right:35px solid red;border-top:60px solid transparent;border-bottom:60px solid transparent;}
        .lanren2 .right{width: 0;height: 0;position:absolute;right:-35px;top:0;border-left:35px solid red;border-top:60px solid transparent;border-bottom:60px solid transparent;}

        </style>
</head>
<body>
<!-- 方法一(不兼容低版本浏览器) -->
<div class="lanren"></div>

<!-- 方法二(兼容主流浏览器) -->
<div class="lanren2">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>